<!--流程模型、流程部署、流程定义 功能入口-->
<template>
  <div class="app-container">
    <el-button type="primary" @click="handleDesign">流程模型设计弹窗</el-button>
    <el-button @click="handleBpmnDetail">流程模型预览弹窗</el-button>
    <el-button plain icon="View" @click="handleDemoFlow" >高亮流程图示例</el-button>
    
    <!-- 弹窗：流程模型图的预览-->
    <el-dialog v-model="bpmnDetailVisible" :destroy-on-close="true" class="bpm-window-el-dialog" :title="'流程模型预览'" 
      :fullscreen="true" :draggable="true" :append-to-body="true">
      <BpmProcessViewer key="processViewer" :value="bpmnXML" v-bind="bpmnControlForm" :prefix="bpmnControlForm.prefix" />
    </el-dialog>
    <!-- 弹窗：流程模型图的设计 -->
    <el-dialog v-model="bpmnDesignVisible" :destroy-on-close="true" class="bpm-window-el-dialog" :title="'流程模型设计'"
      :fullscreen="true" :draggable="true" :append-to-body="true">
      <BpmProcessDesigner key="processDesigner" v-model:xml-string="bpmnXML" v-bind="bpmnControlForm" :prefix="bpmnControlForm.prefix" @change="bpmnXmlChange" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bpmnDesignVisible = false">取消</el-button>
          <el-button type="primary" @click="bpmnDesignSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
    
  </div>
    <!-- 弹窗：高亮流程图示例 -->
    <el-dialog v-model="showDemoFlow" v-if="showDemoFlow" :destroy-on-close="true"  title="高亮流程图示例" 
    :fullscreen="true" :draggable="true" :append-to-body="true">
      <ProcessInstanceDemo />
      <!-- <ProcessInstanceBpmnViewer
        :id="`${id}`"
        :bpmn-xml="bpmnXML"
        :loading="processInstanceLoading"
        :process-instance="processInstance"
        :tasks="tasks"
      /> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDemoFlow = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup >
import {ref,reactive } from 'vue'
import BpmProcessViewer from "@/components/bpmnProcess/viewer/BpmProcessViewer";
import BpmProcessDesigner from "@/components/bpmnProcess/designer/BpmProcessDesigner";
import ProcessInstanceDemo from "@/views/bpm/ProcessInstanceDemo";

const bpmnDesignVisible = ref(false);
const bpmnDetailVisible = ref(false);
const bpmnXML = ref(null);
const bpmnControlForm = ref({
  prefix: "activiti",
});
const processName = ref(null);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    key: undefined,
    name: undefined,
    category: null
  },
});


/** 流程图的详情按钮操作 */
const handleBpmnDetail = async (row) => {
  processName.value = row.name;
  //getDefinitionXML({ deploymentId: row.deploymentId, resourceName: row.resourceName }).then((data) => {
    //bpmnXML.value = data || "";
    bpmnXML.value =
      '<?xml version="1.0" encoding="UTF-8"?><bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="diagram_Process_1707113054890" targetNamespace="http://activiti.org/bpmn">  <bpmn2:process id="Process_1707113054890" name="业务流程_1707113054890" isExecutable="true">    <bpmn2:startEvent id="Event_0teb0yr">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:outgoing>Flow_0s3f0on</bpmn2:outgoing>    </bpmn2:startEvent>    <bpmn2:userTask id="Activity_180agtk">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:incoming>Flow_0s3f0on</bpmn2:incoming>      <bpmn2:outgoing>Flow_1dcrggf</bpmn2:outgoing>    </bpmn2:userTask>    <bpmn2:sequenceFlow id="Flow_0s3f0on" sourceRef="Event_0teb0yr" targetRef="Activity_180agtk" />    <bpmn2:parallelGateway id="Gateway_0ychkw8">      <bpmn2:incoming>Flow_1dcrggf</bpmn2:incoming>      <bpmn2:outgoing>Flow_1v41oxy</bpmn2:outgoing>      <bpmn2:outgoing>Flow_1q268s6</bpmn2:outgoing>    </bpmn2:parallelGateway>    <bpmn2:sequenceFlow id="Flow_1dcrggf" sourceRef="Activity_180agtk" targetRef="Gateway_0ychkw8" />    <bpmn2:userTask id="Activity_15y12k5">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:incoming>Flow_1v41oxy</bpmn2:incoming>      <bpmn2:outgoing>Flow_08r2vyr</bpmn2:outgoing>    </bpmn2:userTask>    <bpmn2:exclusiveGateway id="Gateway_1auwa3g">      <bpmn2:incoming>Flow_08r2vyr</bpmn2:incoming>      <bpmn2:incoming>Flow_0lqye8t</bpmn2:incoming>      <bpmn2:outgoing>Flow_0q0enh3</bpmn2:outgoing>    </bpmn2:exclusiveGateway>    <bpmn2:sequenceFlow id="Flow_08r2vyr" sourceRef="Activity_15y12k5" targetRef="Gateway_1auwa3g" />    <bpmn2:sequenceFlow id="Flow_1v41oxy" sourceRef="Gateway_0ychkw8" targetRef="Activity_15y12k5" />    <bpmn2:userTask id="Activity_1bkia5n">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:incoming>Flow_1q268s6</bpmn2:incoming>      <bpmn2:outgoing>Flow_0lqye8t</bpmn2:outgoing>    </bpmn2:userTask>    <bpmn2:sequenceFlow id="Flow_1q268s6" sourceRef="Gateway_0ychkw8" targetRef="Activity_1bkia5n" />    <bpmn2:sequenceFlow id="Flow_0lqye8t" sourceRef="Activity_1bkia5n" targetRef="Gateway_1auwa3g" />    <bpmn2:endEvent id="Event_1trfigh">      <bpmn2:incoming>Flow_0q0enh3</bpmn2:incoming>    </bpmn2:endEvent>    <bpmn2:sequenceFlow id="Flow_0q0enh3" sourceRef="Gateway_1auwa3g" targetRef="Event_1trfigh" />  </bpmn2:process>  <bpmndi:BPMNDiagram id="BPMNDiagram_1">    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1707113054890">      <bpmndi:BPMNShape id="Gateway_0fyg5l0_di" bpmnElement="Gateway_0ychkw8">        <dc:Bounds x="545" y="215" width="50" height="50" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Activity_15y12k5_di" bpmnElement="Activity_15y12k5">        <dc:Bounds x="770" y="200" width="100" height="80" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Activity_1bkia5n_di" bpmnElement="Activity_1bkia5n">        <dc:Bounds x="770" y="300" width="100" height="80" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Gateway_1auwa3g_di" bpmnElement="Gateway_1auwa3g" isMarkerVisible="true">        <dc:Bounds x="975" y="215" width="50" height="50" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Event_1trfigh_di" bpmnElement="Event_1trfigh">        <dc:Bounds x="1142" y="222" width="36" height="36" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Activity_180agtk_di" bpmnElement="Activity_180agtk">        <dc:Bounds x="370" y="200" width="100" height="80" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Event_0teb0yr_di" bpmnElement="Event_0teb0yr">        <dc:Bounds x="252" y="222" width="36" height="36" />      </bpmndi:BPMNShape>      <bpmndi:BPMNEdge id="Flow_0s3f0on_di" bpmnElement="Flow_0s3f0on">        <di:waypoint x="288" y="240" />        <di:waypoint x="370" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_1dcrggf_di" bpmnElement="Flow_1dcrggf">        <di:waypoint x="470" y="240" />        <di:waypoint x="545" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_08r2vyr_di" bpmnElement="Flow_08r2vyr">        <di:waypoint x="870" y="240" />        <di:waypoint x="975" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_1v41oxy_di" bpmnElement="Flow_1v41oxy">        <di:waypoint x="595" y="240" />        <di:waypoint x="770" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_1q268s6_di" bpmnElement="Flow_1q268s6">        <di:waypoint x="570" y="265" />        <di:waypoint x="570" y="340" />        <di:waypoint x="770" y="340" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_0lqye8t_di" bpmnElement="Flow_0lqye8t">        <di:waypoint x="870" y="340" />        <di:waypoint x="1000" y="340" />        <di:waypoint x="1000" y="265" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_0q0enh3_di" bpmnElement="Flow_0q0enh3">        <di:waypoint x="1025" y="240" />        <di:waypoint x="1142" y="240" />      </bpmndi:BPMNEdge>    </bpmndi:BPMNPlane>  </bpmndi:BPMNDiagram></bpmn2:definitions>';
    bpmnDetailVisible.value = true;
  //});
};


/** 设计按钮操作 */
function handleDesign(row) {
  processName.value = row.name;
  bpmnXML.value =
    '<?xml version="1.0" encoding="UTF-8"?><bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="diagram_Process_1707113054890" targetNamespace="http://activiti.org/bpmn">  <bpmn2:process id="Process_1707113054890" name="业务流程_1707113054890" isExecutable="true">    <bpmn2:startEvent id="Event_0teb0yr">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:outgoing>Flow_0s3f0on</bpmn2:outgoing>    </bpmn2:startEvent>    <bpmn2:userTask id="Activity_180agtk">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:incoming>Flow_0s3f0on</bpmn2:incoming>      <bpmn2:outgoing>Flow_1dcrggf</bpmn2:outgoing>    </bpmn2:userTask>    <bpmn2:sequenceFlow id="Flow_0s3f0on" sourceRef="Event_0teb0yr" targetRef="Activity_180agtk" />    <bpmn2:parallelGateway id="Gateway_0ychkw8">      <bpmn2:incoming>Flow_1dcrggf</bpmn2:incoming>      <bpmn2:outgoing>Flow_1v41oxy</bpmn2:outgoing>      <bpmn2:outgoing>Flow_1q268s6</bpmn2:outgoing>    </bpmn2:parallelGateway>    <bpmn2:sequenceFlow id="Flow_1dcrggf" sourceRef="Activity_180agtk" targetRef="Gateway_0ychkw8" />    <bpmn2:userTask id="Activity_15y12k5">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:incoming>Flow_1v41oxy</bpmn2:incoming>      <bpmn2:outgoing>Flow_08r2vyr</bpmn2:outgoing>    </bpmn2:userTask>    <bpmn2:exclusiveGateway id="Gateway_1auwa3g">      <bpmn2:incoming>Flow_08r2vyr</bpmn2:incoming>      <bpmn2:incoming>Flow_0lqye8t</bpmn2:incoming>      <bpmn2:outgoing>Flow_0q0enh3</bpmn2:outgoing>    </bpmn2:exclusiveGateway>    <bpmn2:sequenceFlow id="Flow_08r2vyr" sourceRef="Activity_15y12k5" targetRef="Gateway_1auwa3g" />    <bpmn2:sequenceFlow id="Flow_1v41oxy" sourceRef="Gateway_0ychkw8" targetRef="Activity_15y12k5" />    <bpmn2:userTask id="Activity_1bkia5n">      <bpmn2:extensionElements>        <activiti:formData />      </bpmn2:extensionElements>      <bpmn2:incoming>Flow_1q268s6</bpmn2:incoming>      <bpmn2:outgoing>Flow_0lqye8t</bpmn2:outgoing>    </bpmn2:userTask>    <bpmn2:sequenceFlow id="Flow_1q268s6" sourceRef="Gateway_0ychkw8" targetRef="Activity_1bkia5n" />    <bpmn2:sequenceFlow id="Flow_0lqye8t" sourceRef="Activity_1bkia5n" targetRef="Gateway_1auwa3g" />    <bpmn2:endEvent id="Event_1trfigh">      <bpmn2:incoming>Flow_0q0enh3</bpmn2:incoming>    </bpmn2:endEvent>    <bpmn2:sequenceFlow id="Flow_0q0enh3" sourceRef="Gateway_1auwa3g" targetRef="Event_1trfigh" />  </bpmn2:process>  <bpmndi:BPMNDiagram id="BPMNDiagram_1">    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1707113054890">      <bpmndi:BPMNShape id="Gateway_0fyg5l0_di" bpmnElement="Gateway_0ychkw8">        <dc:Bounds x="545" y="215" width="50" height="50" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Activity_15y12k5_di" bpmnElement="Activity_15y12k5">        <dc:Bounds x="770" y="200" width="100" height="80" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Activity_1bkia5n_di" bpmnElement="Activity_1bkia5n">        <dc:Bounds x="770" y="300" width="100" height="80" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Gateway_1auwa3g_di" bpmnElement="Gateway_1auwa3g" isMarkerVisible="true">        <dc:Bounds x="975" y="215" width="50" height="50" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Event_1trfigh_di" bpmnElement="Event_1trfigh">        <dc:Bounds x="1142" y="222" width="36" height="36" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Activity_180agtk_di" bpmnElement="Activity_180agtk">        <dc:Bounds x="370" y="200" width="100" height="80" />      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Event_0teb0yr_di" bpmnElement="Event_0teb0yr">        <dc:Bounds x="252" y="222" width="36" height="36" />      </bpmndi:BPMNShape>      <bpmndi:BPMNEdge id="Flow_0s3f0on_di" bpmnElement="Flow_0s3f0on">        <di:waypoint x="288" y="240" />        <di:waypoint x="370" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_1dcrggf_di" bpmnElement="Flow_1dcrggf">        <di:waypoint x="470" y="240" />        <di:waypoint x="545" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_08r2vyr_di" bpmnElement="Flow_08r2vyr">        <di:waypoint x="870" y="240" />        <di:waypoint x="975" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_1v41oxy_di" bpmnElement="Flow_1v41oxy">        <di:waypoint x="595" y="240" />        <di:waypoint x="770" y="240" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_1q268s6_di" bpmnElement="Flow_1q268s6">        <di:waypoint x="570" y="265" />        <di:waypoint x="570" y="340" />        <di:waypoint x="770" y="340" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_0lqye8t_di" bpmnElement="Flow_0lqye8t">        <di:waypoint x="870" y="340" />        <di:waypoint x="1000" y="340" />        <di:waypoint x="1000" y="265" />      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="Flow_0q0enh3_di" bpmnElement="Flow_0q0enh3">        <di:waypoint x="1025" y="240" />        <di:waypoint x="1142" y="240" />      </bpmndi:BPMNEdge>    </bpmndi:BPMNPlane>  </bpmndi:BPMNDiagram></bpmn2:definitions>';
    bpmnDesignVisible.value = true;
}

function bpmnDesignSave(){
  console.log(bpmnXML.value)
  //TODO 保存到数据库
}

function bpmnXmlChange(val){
  bpmnXML.value = xml;
}

const showDemoFlow = ref(false);

/**
 * 流程图高亮显示
 */
function handleDemoFlow(evt){
  console.log(evt)
  showDemoFlow.value = true;
}
</script>

